<template>
  <a-modal :visible="true" title="搭配商品" centered width="960px" :footer="null" @cancel="close">
    <a-table bordered :columns="columns" :data-source="dataSource" :pagination="false" :rowKey="record => record.productAttrIdModel">
      <span slot="xh" slot-scope="text, record, index">{{ index + 1 }}</span>
      <template slot="goodsInfo" slot-scope="text, record">
        <div class="info">
          <img v-if="record.image" :src="record.image" class="skc-pic" alt="" />
          <img v-if="record.productImage" :src="record.productImage" class="skc-pic" alt="" />
          <div class="">
            <p>
              <span v-if="record.brandName">【{{ record.brandName }}】</span>
              <span>{{ record.productName }}</span>
            </p>
            <p v-if="record.color">
              <span class="size">{{ record.colorCode }}/</span>
              <span class="color">{{ record.colorName }}</span>
            </p>
          </div>
        </div>
      </template>
      <span slot="productNoModel" slot-scope="text, record">{{ record.productNoModel || record.productNo || record.productNoMore }}</span>
    </a-table>
  </a-modal>
</template>
<script>
const columns = [
  {
    title: '序号',
    // dataIndex:'id',
    width: 100,
    scopedSlots: { customRender: 'xh' }
  },
  {
    title: '商品',
    dataIndex: '',
    scopedSlots: { customRender: 'goodsInfo' }
  },
  {
    title: '款号',
    width: 150,
    scopedSlots: { customRender: 'productNoModel' }
  },
  {
    title: '年份',
    dataIndex: 'year',
    width: 100
  },
  {
    title: '波段',
    dataIndex: 'band',
    width: 100
  },
  {
    title: '季节',
    dataIndex: 'season',
    width: 100
  }
]
export default {
  props: {
    dataSource: {
      type: Array,
      default: () => []
    }
  },
  data() {
    return {
      columns
    }
  },
  methods: {
    close() {
      this.$emit('close')
    }
  }
}
</script>
<style scoped>
.skc-pic {
  width: 50px;
  height: 50px;
  margin-right: 10px;
}
p {
  margin-bottom: 5px;
}
.info {
  display: flex;
  justify-content: start;
  align-items: center;
}
</style>
